<template>
  <div class="detailPageFile">
    <div class="fileInfo">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>文件列表</span>
        </div>
        <el-row :gutter="20" class="infoRow">
          <el-col :span="12">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="iconfont icon-waiguan"></i>
                <span class="">外观任务书附件列表</span>
              </div>
              <div style="padding: 14px">
                <span>外观任务单下发完成时间</span>
                <el-tag
                  type="success"
                  v-if="formData.appearance_issue_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{ formData.appearance_issue_time }}</time>
                  <hr />
                  <el-table
                    ref="multipleTable"
                    :data="formData.fileList"
                    :key="timeStamp"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleAppearanceSelectionChange"
                  >
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column label="上传日期" width="240">
                      <template slot-scope="scope">{{
                        parseDate(scope.row.createTime)
                      }}</template>
                    </el-table-column>

                    <el-table-column
                      prop="address"
                      label="操作"
                      width="80"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-link
                          @click="handleDownload(scope.row)"
                          type="primary"
                        >
                          下载
                        </el-link>
                      </template>
                    </el-table-column>
                  </el-table>
                  <hr />
                  <el-button
                    type="primary"
                    icon="el-icon-download "
                    @click="handleDownloadMany('appearance')"
                    v-show="
                      typeof formData.fileList != 'undefined' &&
                      formData.fileList.length > 0
                    "
                    >批量下载</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="iconfont icon-fangan"></i>
                <span class="">产品策划方案书附件列表</span>
              </div>
              <div style="padding: 14px">
                <span>产品策划方案书下发完成时间</span>
                <el-tag type="success" v-if="formData.plan_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{ formData.plan_date }}</time>

                  <hr />
                  <el-table
                    ref="multipleTable"
                    :data="formData.schemeFileList"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSchemeSelectionChange"
                  >
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column label="上传日期" width="240">
                      <template slot-scope="scope">{{
                        parseDate(scope.row.date)
                      }}</template>
                    </el-table-column>

                    <el-table-column
                      prop="address"
                      label="操作"
                      width="80"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-link
                          @click="handleDownload(scope.row)"
                          type="primary"
                          >下载</el-link
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <hr />
                  <el-button
                    type="primary"
                    icon="el-icon-download"
                    @click="handleDownloadMany('scheme')"
                    v-show="
                      typeof formData.schemeFileList != 'undefined' &&
                      formData.schemeFileList.length > 0
                    "
                    >批量下载</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="infoRow">
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="iconfont icon-zhongmingming"></i>
                <span class="red">命名申请表下发</span>
              </div>
              <div style="padding: 14px">
                <span>命名申请表单下发完成时间</span>
                <el-tag type="success" v-if="formData.name_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{ formData.name_date }}</time>
                  <hr />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="seagreen iconfont icon-xilie"></i>
                <span class="red">系列名称确定</span>
              </div>
              <div style="padding: 14px">
                <span>系列名称确定完成时间</span>

                <el-tag
                  v-if="formData.series_name_state == 'true'"
                  type="success"
                  >完成</el-tag
                >
                <el-tag v-else type="danger">未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{ formData.series_name_date }}</time>
                  <hr />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="iconfont icon-kongtiao"></i>
                <span class="red">空壳功能确定</span>
              </div>
              <div style="padding: 14px">
                <span>空壳功能确定完成时间</span>
                <el-tag type="success" v-if="formData.shell_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{formData.shell_date}}</time>
                  <hr />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="iconfont icon-pingshen"></i>
                <span class="red">样机评审</span>
              </div>
              <div style="padding: 14px">
                <span>样机评审完成时间</span>
                <el-tag type="success" v-if="formData.prototype_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{formData.prototype_date}}</time>
                  <hr />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="infoRow">
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="iconfont icon-allicon_tuijianshudan"></i>
                <span class="red">产品推荐书</span>
              </div>
              <div style="padding: 14px">
                <span>产品推荐书下发完成时间</span>
                <el-tag
                  type="success"
                  v-if="formData.recommend_book_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{formData.recommend_book_date}}</time>
                  <hr />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="iconfont icon-tuijian"></i>
                <span class="red">产品推荐会</span>
              </div>
              <div style="padding: 14px">
                <span>产品推荐会召开完成时间</span>
                <el-tag
                  type="success"
                  v-if="formData.recommend_meeting_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{formData.recommend_meeting_date}}</time>
                  <hr />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="iconfont icon-liangchan"></i>
                <span class="red">量产下发完成</span>
              </div>
              <div style="padding: 14px">
                <span>量产下发完成时间</span>
                <el-tag
                  type="success"
                  v-if="formData.production_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{formData.production_date}}</time>
                  <hr />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <i class="red iconfont icon-shangjia"></i>
                <span>上市</span>
              </div>
              <div style="padding: 14px">
                <span>上市时间</span>
                <el-tag type="success" v-if="formData.market_state == 'true'"
                  >完成</el-tag
                >
                <el-tag type="danger" v-else>未完成</el-tag>
                <div class="bottom clearfix">
                  <time class="time">{{ formData.market_date }}</time>
                  <hr />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import "@/assets/icons/iconfont.css";
import { easyClone } from "@/util/index.js";
import { downloadRequest } from "@/api/api";
import {SelectData} from "@/mixins/select-data.js"
import JSZip from "jszip";
import FileSaver from "file-saver";
export default {
  mixins: [SelectData],
  name: "DetailPageFile",
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    data: {
      handler(newValue) {
        this.formData = easyClone(newValue) || {};
        this.timeStamp = new Date().valueOf();
        console.log("fileList", this.formData);
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      timeStamp: "",
      currentDate: "2",
      selectScheme: [],
      selectAppearance: [],
    };
  },
  methods: {
    handleSchemeSelectionChange(val) {
      this.selectScheme = val;
      console.log(this.selectScheme);
    },
    handleAppearanceSelectionChange(val) {
      this.selectAppearance = val;
    },
    handleDownload(file) {
      var url = "/plan/download";
      var _this = this;
      let params = { filePath: file.path };
      let fileName = file.name;
      downloadRequest(url, params).then((res) => {
        console.log(res.data);
        let blob = new Blob([res.data]);
        FileSaver.saveAs(blob, fileName);
      });
    },
    down(zip) {
      zip.generateAsync({ type: "blob" }).then((content) => {
        let zipName = "批量下载.zip";
        FileSaver.saveAs(content, zipName);
      });
    },
    async handleDownloadMany(type) {
      if (type == "scheme") {
        if (this.selectScheme.length == 0) {
          this.$message.error("未选中文件");
          return;
        } else {
          try {
            let zip = new JSZip();
            let url = "/plan/download";
            for (let i = 0; i < this.selectScheme.length; i++) {
              let fileName = this.selectScheme[i].name;
              let params = { filePath: this.selectScheme[i].path };
              await downloadRequest(url, params).then((res) => {
                zip.file(fileName, res.data);
              });
            }
            console.log(zip);
            this.down(zip);
          } catch (err) {
            console.log("err", err);
          }
        }
      } else if (type == "appearance") {
        if (this.selectAppearance.length == 0) {
          this.$message.error("未选中文件");
          return;
        } else {
          try {
            let zip = new JSZip();
            let url = "/plan/download";
            for (let i = 0; i < this.selectAppearance.length; i++) {
              let fileName = this.selectAppearance[i].name;
              let params = { filePath: this.selectAppearance[i].path };
              await downloadRequest(url, params).then((res) => {
                zip.file(fileName, res.data);
              });
            }
            console.log(zip);
            this.down(zip);
          } catch (err) {
            console.log("err", err);
          }
        }
      }
    },
  },
};
</script>
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}
.fileInfo >>> .infoRow {
  margin: 20px;
}
.red {
  color: black;
}
.seagreen {
  color: seagreen;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix span,
i {
  float: left;
}
.clearfix:after {
  clear: both;
}
</style>